<!-- head start -->
<#include "common/head.html"/>
<!-- head end -->

<link rel="stylesheet" type="text/css" href="${domain}/static/css/index.css">
<title>易居创研</title>

<!--navbar start-->
<#include "common/navbar.html"/>
<!--navbar end -->

<!--page content start -->
<div class="page-index">

    <!-- banner -->
    <div class="slider" id="slider">
        <ul class="slider-list clearfix" style="left: 0;">
            <#list cmsAds as cmsAd>
                <li style="background-image: url(${cmsAd.adImage});">
                    <div class="slider-text">
                        <h2>${cmsAd.adName}</h2>
                        <p>${cmsAd.adText}</p>
                        <a href="${cmsAd.adUrl}" class="btn" target="_self">查看详情</a>
                    </div>
                </li>
            </#list>
        </ul>

        <ol class="slider-num clearfix">
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <!-- banner js -->
    <script type="text/javascript">
        window.addEventListener('load', function(){

            document.getElementById("index").className="current";

            var oSlider = document.getElementById("slider");
            var oUl = oSlider.getElementsByTagName("ul")[0];
            var aLi = oUl.getElementsByTagName("li");
            var aBtn = oSlider.getElementsByTagName("ol")[0].getElementsByTagName("li");
            var w = -aLi[0].offsetWidth;
            var current = 0;
            var timer = null;

            //切换按钮
            for(var i = 0; i < aBtn.length; i++){
                aBtn[i].index = i;
                aBtn[i].onmousemove = function(){
                    animate(this.index);
                }
            }

            //鼠标移入图片静止
            oSlider.onmouseon = function(){
                clearInterval(timer);
            }

            //鼠标移出图片滚动
            oSlider.onmousemover = function(){
                autoPlay();
            }

            //自动循环播放
            function autoPlay(time){
                time = time || 3500;
                if(timer) clearInterval(timer)
                timer = setInterval(function(){
                    current += 1;
                    if(current >= aLi.length) current = 0;
                    animate(current);
                },time)
            }

            //图片按钮同时滚动
            function animate(index){
                //图片滚动
                oUl.style.left = w * index + "px";
                //按钮滚动
                for(var i = 0; i < aBtn.length; i++) aBtn[i].className = "";
                aBtn[index].className = "current";
            }
            autoPlay();
        })
    </script>

    <!-- article list start -->
    <ul class="list01 clearfix">
        <#list articles as article>
            <li>
                <a href="${article.articleUrl}" class="list01-img" target="_self"><img src="${article.thumbnailImg}"
                                                                                        alt=""></a>
                <h2 class="ellipsis"><a href="${article.articleUrl}" target="_self">${article.articleTitle}</a></h2>
                <p class="ellipsis"><a href="${article.articleUrl}" target="_self">${article.articleDesp}</a></p>
                <div class="list01-tack">
                    <div class="list01-editer"><span>${article.department}</span> | <span>${article.articleAuthor}</span>
                    </div>
                    <div class="list01-tack01">
                        <#if article.tags??>
                            <#list article.tags as tag>
                                <span class="i-tag">${tag}</span>
                            </#list>
                        </#if>
                    </div>
                </div>
            </li>
        </#list>
    </ul>
    <!-- article list end -->

    <div class="loading-more">加载更多…</div>

    <!-- load more js -->
    <script type="text/javascript">
        var _currentCount = 0;
        var _defaultCount = 6;

        window.addEventListener("load",function(){
            var _loadMore = document.querySelector(".loading-more");
            _loadMore.addEventListener("click",function(){
                loadData(_defaultCount);
            },false);

            function loadData(loadCount){
                var datas = document.querySelectorAll(".list01 li");

                for (var i = _currentCount; i < datas.length ; i++) {
                    if(i < (_currentCount + loadCount)){
                        datas[i].style.display="block";
                    }else{
                        datas[i].style.display="none";
                    }
                }
                _currentCount+=loadCount;

                if(datas.length < _currentCount){
                    _loadMore.style.display="none";
                    return;
                }
            }

            loadData(_defaultCount);
        },false);

    </script>
</div>
<!--page content end -->


<!-- foot start -->
<#include "common/foot.html"/>
<!-- foot end -->